<template>
  <el-form-item prop="name" :rules="nameRequiredRule" class="column-area">
    <span slot="label">
      {{ constantDic.designer.setting.uniqueName }}
      <el-tooltip effect="light" :content="constantDic.designer.setting.editNameHelp">
        <i class="el-icon-info"/>
      </el-tooltip>
    </span>
    <template v-if="(!!selectedWidget['category'] && (selectedWidget['type'] !== 'sub-form')) || noFieldList">
      <el-input
          type="text"
          v-model="optionModel['name']"
          :readonly="widgetNameReadonly"
          @change="updateWidgetNameAndRef"
      />
    </template>
    <template v-else>
      <el-select
          filterable
          allow-create
          v-model="optionModel['name']"
          :disabled="widgetNameReadonly"
          @change="updateWidgetNameAndRef"
          :title="constantDic.designer.setting.editNameHelp"
      >
        <el-option v-for="(sf, sfIdx) in serverFieldList" :key="sfIdx" :label="sf.label" :value="sf.name"/>
      </el-select>
    </template>
  </el-form-item>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import {isEmptyStr} from "@/utils/designer/util"

export default {
  name: "name-editor",

  componentName: "name-editor",

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      constantDic: constantDic,
      nameRequiredRule: [{required: true, message: 'name required'}],
    }
  },

  computed: {
    noFieldList() {
      return !this.serverFieldList || (this.serverFieldList.length <= 0)
    },

    widgetNameReadonly() {
      return !!this.getDesignerConfig().widgetNameReadonly
    },

  },

  methods: {
    updateWidgetNameAndRef(newName) {
      let oldName = this.designer.selectedWidgetName
      if (isEmptyStr(newName)) {
        this.selectedWidget.options.name = oldName
        this.$message.info(`${constantDic.hint.nameRequired}`)
        return
      }

      if (!!this.designer.formWidget) {
        let foundRef = this.designer.formWidget.getWidgetRef(newName) // 检查newName是否已存在！！
        if (!!foundRef) {
          this.selectedWidget.options.name = oldName
          this.$message.info(`${constantDic.hint.duplicateName} ${newName}`)
          return
        }

        let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName)
        if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
          widgetInDesign.registerToRefList(oldName)  //注册组件新的ref名称并删除老的ref！！
          let newLabel = this.getLabelByFieldName(newName)
          this.designer.updateSelectedWidgetNameAndLabel(this.selectedWidget, newName, newLabel)
        }
      }
    },

    getLabelByFieldName(fieldName) {
      for (let i = 0; i < this.serverFieldList.length; i++) {
        if (this.serverFieldList[i].name === fieldName) {
          return this.serverFieldList[i].label
        }
      }
      return null
    },
  }
}
</script>

<style lang="scss" scoped>
.column-area{
  display: flex;
  flex-direction: column;
  :deep(.el-form-item__label){
    width: 100% !important;
    margin-bottom: 10px;
  }
  :deep(.el-form-item__content){
    width: 100%;
    margin-left: 0 !important;
  }

}
</style>
